<template>
  <div class="code-demo">
    <CodeRain
        bgImg="https://upload-bbs.miyoushe.com/upload/2021/08/11/291356697/13ba1dad08865b5f24cdb55b3b1d3685_308203621414115555.png"
        :textColor="['#09c', '#333', '#fff']"
        textMsg="Genshin"
        mode="split"
        :speed="2"
        ref="codeRainRef"
    >
      <div class="code-rain-slot">
        <div>这里是插槽内容</div>
        <button @click="open()">开始</button>
        <button @click="close()">停止</button>
      </div>
    </CodeRain>
  </div>
</template>

<script setup>
import {ref} from "vue";

defineOptions({
  name: "code-rain-demo",
  inheritAttrs: false
})

const codeRainRef = ref()

function open() {
  codeRainRef.value?.start()
}
function close() {
  codeRainRef.value?.stop()
}
</script>

<style scoped>
.code-demo {
  width: 100%;
  aspect-ratio: 20 / 9;
}
.code-rain-slot {
  width: 130px;
  height: 130px;
  background-color: #ffffff;
}
</style>